<!-- 置换专区确认订单 -->
<template>
	<view>
		<!-- 地址 -->
		<navigator url="/mall/my/address?back=1" class="address-section">
			<view class="order-content">
				<view class="cen">
					<view class="top">
						<image class="addressIcon" src="../static/images/1fsd.png" mode="aspectFit"></image>
						<text class="name">{{addressData.real_name}}</text>
						<text class="mobile">{{addressData.phone}}</text>
					</view>
					<text class="address clamp2">{{addressData.province}} {{addressData.city}}{{addressData.district}}{{addressData.detail}}</text>
				</view>
				<!-- <text class="yticon icon-you"></text> -->
			</view>
		</navigator>
		<view class="goods-section" v-for="(items,index) in cartInfo" :key="index">
			<view class="g-header b-b">
				<image class="logo" :src="items.seller_info.online_logo"></image>
				<text class="name">{{items.seller_info.online_name}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item,idx) in items.seller_info.goods_list" :key="idx">
				<image :src="item.productInfo.attrInfo?item.productInfo.attrInfo.image:item.productInfo.image"></image>
				<view class="right">
					<text class="title clamp2">{{item.productInfo.store_name}}</text>
					<view class="specBox">
						<!-- 兼容app -->
						<text class="spec">规格</text>
						<text class="specVal">{{item.productInfo.attrInfo ? item.productInfo.attrInfo.suk||'' : '无'}}</text>
					</view>
					<view class="specBox">
						<!-- 兼容app -->
						<text class="spec">类型</text>
						<text class="specVal" v-if="item.sub_type == 2">黄贝壳置换</text>
						<text class="specVal" v-else-if="item.sub_type == 3">红贝壳置换</text>
						<text class="specVal" v-else-if="item.sub_type == 4">蓝贝壳置换</text>
					</view>

					<view class="price-box">
						<text class="price">{{item.productInfo.attrInfo?item.productInfo.attrInfo.price:item.productInfo.price}}</text>
						<text class="num">x {{item.cart_num||''}}</text>
					</view>
				</view>
			</view>
			<view class="yt-list-cell desc-cell">
				<view class="cell">
					<text class="cell-tit clamp">留言</text>
					<input class="desc" type="text" placeholder="请填写留言信息" placeholder-class="placeholder" @input="message($event,index)" />
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<view class="cell">
					<text class="cell-tit clamp" v-if="priceGroup.yellowShell">共计黄贝壳</text>
					<text class="cell-tit clamp" v-if="priceGroup.redShell">共计红贝壳</text>
					<text class="cell-tit clamp" v-if="priceGroup.blueShell">共计蓝贝壳</text>
					<text class="cell-tip">{{priceGroup.totalShell||'0.00'}}</text>
				</view>
				<!-- <view class="label">
					<text class="label-tit">支付后剩余黄贝壳</text>
					<text class="label-tip">{{surplus_card_value||''}} </text>
				</view> -->
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell">
					<text class="cell-tit clamp">运费 (现金支付)</text>
					<text class="cell-tip">￥ {{priceGroup.storePostage||'0.00'}}</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text v-if="priceGroup.yellowShell">黄贝壳</text>
				<text v-if="priceGroup.redShell">红贝壳</text>
				<text v-if="priceGroup.blueShell">蓝贝壳</text>
				<text>{{priceGroup.totalShell}}</text>
			</view>
			<text class="submit" @click="clickSubmit">提交订单</text>
		</view>
		<!-- app选择支付方式 -->
		<choosePay ref="choosePay" @confirm="confirm1"></choosePay>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
		<z-modal ref="zmodal" content="确认在VIP提货专区使用将不能选择线下服务,是否确认提货？" @confirm="confirm"></z-modal>
		<z-modal ref="zmodal1" content="选择商品总卡点超过提货卡剩余卡点,请返回重新选择" :cancelShow="false" @confirm="back"></z-modal>
	</view>
</template>

<script>
	import {
		rlmtorderConfirm,
		rlmtorderCreate,
	} from '@/api/mall.js'
	import {
		checkPassword
	} from "@/api/user.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import evanSwitch from "@/components/evan-switch/evan-switch.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import utils from "@/common/utils.js"
	import wechat from '@/common/wechat.js'
	import choosePay from '@/components/choosePay/choosePay.vue'
	export default {
		components: {
			evanSwitch,
			uniPopup,
			passkeyborad,
			choosePay
		},
		data() {
			return {
				maskState: 0, //优惠券面板显示状态
				descList: [], //备注
				payType: 1, //1微信 2支付宝
				addressData: {
					real_name: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					detail: '',
					default: 1,
					id: 0
				},
				cartInfo: [{ // 初始化 不能删,兼容app
					seller_info: {
						goods_list: [{
							productInfo: {
								attrInfo: {
									suk: ''
								}
							}
						}],
					}
				}],
				priceGroup: {},
				orderKey: '',
				userInfo: {},
				keyboradShow: false,
				surplus_card_value: 0,
				is_first_card: 0,
				provider: "wxpay",
				payType: "weixin",
			}
		},
		onLoad(option) {
			rlmtorderConfirm({
				cartId: option.cartId
			}).then(res => {
				if (res.data.status == 'CARD_LACK_ERROR') {
					this.$refs.zmodal1.show()
				} else {
					res.data.addressInfo == null ? this.addressData.real_name = '请选择地址' : this.addressData = res.data.addressInfo
					this.addressData.phone = utils.hidden(this.addressData.phone, 3, 4)
					this.cartInfo = res.data.cartInfo;
					this.priceGroup = res.data.shellGroup;
					this.orderKey = res.data.orderKey;
					this.userInfo = res.data.userInfo;
					this.is_first_card = res.data.is_first_card
					let _this = this
					this.cartInfo.forEach((item, index) => {
						_this.descList.push({
							seller_id: item.seller_info.seller_id,
							desc: ''
						})
					})
				}
			});
		},
		computed: {
			goodsNum() {
				let goodsNum = 0
				this.cartInfo.forEach(items => {
					items.seller_info.goods_list.forEach(item => {
						goodsNum = goodsNum + item.cart_num
					})
				})
				return goodsNum
			}
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			message(e, index) {
				this.descList[index].desc = e.target.value
			},
			clickSubmit() {
				if (this.is_first_card == 1) {
					this.$refs.zmodal.show()
				} else {
					this.confirm()
				}

			},
			confirm() {
				if (this.priceGroup.storePostage == 0) {
					if (!uni.getStorageSync("userInfo").withdraw_pass) {
						uni.showModal({
							content: "0元支付需设置操作密码",
							confirmText: "去设置",
							cancelText: "取消",
							confirmColor: "#57BE6A",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
									})
								} else if (res.cancel) {}

							}
						})
					} else {
						this.keyboradShow = true
					}
				} else {
					//#ifndef APP-PLUS
					this.submit()
					//#endif
					//#ifdef APP-PLUS
					this.$refs.choosePay.show()
					//#endif
				}
			},
			confirm1(e) {
				this.payType = e.payType
				this.provider = e.provider
				this.submit()
			},
			submit() {
				let data = {
					addressId: this.addressData.id,
					mark: this.descList,
					payType: this.payType,
					// #ifdef MP-WEIXIN
					from: "routine",
					// #endif
					// #ifdef APP-PLUS
					from: "app",
					// #endif
					// #ifdef H5
					from: "weixin",
					// #endif
				}
				uni.showLoading({
					mask:true
				})
				rlmtorderCreate(this.orderKey, data).then(res => {
					if (res.data.status == "SUCCESS") {
						uni.hideLoading()
						uni.showToast({
							title: "置换成功"
						})
						setTimeout(function() {
							uni.redirectTo({
								url: `/mall/permutation/perOrder`
							})
						}, 300);
					} else if (res.data.status == "WECHAT_PAY"||res.data.status == "ALIPAY") {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.result.jsConfig.timestamp,
							nonceStr: res.data.result.jsConfig.nonceStr,
							package: res.data.result.jsConfig.package,
							signType: res.data.result.jsConfig.signType,
							paySign: res.data.result.jsConfig.paySign,
							complete: function(re) {
								setTimeout(function() {
									uni.hideLoading()
									uni.redirectTo({
										url: `/mall/permutation/perOrder`
									})
								}, 500);
							}
						});
						// #endif
						//#ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data.result.jsConfig,
							complete: function(re) {
								setTimeout(function() {
									uni.hideLoading()
									uni.redirectTo({
										url: `/mall/permutation/perOrder`
									})
								}, 500);
							}
						});
						// #endif
						//#ifdef H5
						// h5支付
						let url = "/mall/permutation/perOrder"
						wechat.pay(res.data.result.jsConfig, url, true)
						//#endif
					}
				})
			},
			finished(password) {
				uni.showLoading({
					mask:true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.submit()
				})
			},
			keyboradClose() {
				this.keyboradShow = false
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
		padding-bottom: 160rpx;
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}

	.address-section {
		padding: 40rpx 30rpx;
		background: #fff;
		background-image: url(../static/images/1dsfz.png);
		background-repeat: no-repeat;
		background-size: 750rpx 3rpx;
		background-position: 0 bottom;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: #303133;
		}

		.top {
			display: flex;
			align-items: center;

			.addressIcon {
				margin-right: 28rpx;
				width: 33rpx;
				height: 44rpx;
			}
		}

		.name {
			font-size: 32rpx;
			margin-right: 22rpx;
			font-weight: bold;
		}

		.mobile {
			font-size: 32rpx;
			font-weight: bold;
		}

		.address {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.goods-section {
		margin-top: 20rpx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100px;
		}

		.name {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-left: 24rpx;
		}

		.g-item {
			display: flex;
			margin: 0 30rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx #f4f4f4 solid;

			image {
				flex-shrink: 0;
				width: 164rpx;
				height: 164rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1;
				padding-left: 40rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			.title {
				text-align: justify;
				font-size: 32rpx;
				color: #333;
			}

			.specBox {
				margin-top: 35rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;

				.spec {
					font-size: 28rpx;
					flex: 1;
				}

				.specVal {
					font-size: 24rpx;
				}
			}

			.price-box {
				margin-top: 35rpx;
				align-items: baseline;
				display: flex;
				justify-content: space-between;
			}

			.price {
				font-size: 40rpx;
				font-weight: bold;
				font-weight: 500;
				color: $mall-price;
			}

			.num {
				font-size: 24rpx;
				color: #999;
			}
		}

		.g-item:last-child {
			border: none;
		}
	}

	.yt-list {
		margin-top: 20rpx;
		background: #fff;
	}

	.desc-cell {
		.cell {
			.cell-tit {
				max-width: 90rpx;
			}

			.desc {
				flex: 1;
				font-size: 28rpx;
				color: #303133;
			}
		}
	}

	.yt-list-cell {
		padding: 10rpx 30rpx 10rpx 40rpx;
		position: relative;

		&.b-b:after {
			left: 30rpx;
		}

		.cell {
			line-height: 70rpx;
			display: flex;
			align-items: center;
		}

		.cell-tit {
			flex: 1;
			font-size: 28rpx;
			color: #666;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 28rpx;
			color: #666;
		}

		.label {
			line-height: 70rpx;
			display: flex;
			align-items: center;
			font-size: 23rpx;
			color: #aaa;

			.label-tit {
				flex: 1;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 30rpx 30rpx 30rpx;
		padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		font-size: 40rpx;
		font-weight: 500;
		background-color: #fff;
		color: #333;
		box-shadow: 0px -5rpx 4rpx 0px rgba(51, 51, 51, 0.05);

		.price-content {
			text:nth-of-type(1) {
				font-size: 24rpx;
				color: #666;
				margin-right: 10rpx;
			}
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			width: 250rpx;
			height: 80rpx;
			background: linear-gradient(135deg, rgba(255, 177, 86, 1), rgba(253, 201, 101, 1));
			border-radius: 40rpx;
		}
	}
</style>
